<template>
  <div>
    <formCommon ref="childRules" :formItemList="formItemList" :value="form" :rules="rules"></formCommon>
  </div>
</template>
<script>
import formCommon from "@/components/formCommon/formCommon.vue";
export default {
  components: {
    formCommon,

  },
  data() {
    return { 
        formItemList:[ 
            { 
            width: '200px', 
            type: "cascader",
            prop: "cascader",
            label: "级联",
            name: "cascader",
            placeholder: "请输入",
            options:[], 
            collapse:true,
            filterable:true,
            props:{
                multiple:true
            } 
          },
          {
            width: '80px',
            type: "text",
            prop: "airport",
            label: "站点",
            name: "airport",
            placeholder: "请输入站点"
          },
          { 
            type: "textarea",
            prop: "airport",
            label: "站点",
            name: "airport",
            placeholder: "请输入站点"
          },
          {
            type: "select",
            prop: "importOrExport",
            label: "进出港",
            name: "importOrExport",
            placeholder: "请输入进出港",
            optList: [ 
              {
                value: "进港",
                label: "进港"
              },
              {
                value: "出港",
                label: "出港"
              }
            ]
          },
          {
            type: "select",
            prop: "mainOrSubBill",
            name: "mainOrSubBill",
            label: "可多选可搜",

            placeholder: "请输入主分单",
            optList: [ 
              {
                value: "主分",
                label: "主分"
              },
              {
                value: "主单",
                label: "主单"
              }
            ],
            filterable:true,
            multiple:true
          },
          {
            type: "daterange",
            name: "pickerdata",
            label: "时间范围",
            prop: "pickerdata", 
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() < Date.now() - 8.64e7;
              }
            }
          },
          {
            type: "date",
            name: "date",
            label: "选择时间",
            prop: "date", 
             
          },
          {
            type: "text",
            name: "largeClass",
            prop: "largeClass",
            label: "大类",
            placeholder: "请输入大类"
          },
          {
            type: "br"
          },
          {
            type: "select",
            name: "isDomestic",
            prop: "isDomestic",
            value: "国内",
            label: "国内/国际",
            placeholder: "请输入国内/国际",
            optList: [ 
              {
                value: "国内",
                label: "国内"
              },
              {
                value: "国际",
                label: "国际"
              }
            ]
          }, {
            type: "switch",
            name: "save",
            prop: "save",
            label: "保存"
          },
          {
            type: "radio",
            name: "radio",
            prop: "radio",
            label: "活动类型",
            optList: ["演唱会", "球赛"]
          },
          {
            type: "br"
          },
          {
            type: "Checkbox",
            label: "爱好",
            prop: "Checkbox",
            name: "Checkbox",
            checkboxs: [
              { label: "羽毛球", value: "badminton" },
              { label: "篮球", value: "basketball" },
              { label: "足球", value: "football" },
              { label: "兵乓球", value: "pong" }
            ]
          },
          {
            type: "btns",
            btns: [
              {
                styles: "primary",
                name: "查询",
                handleClick: this.search
              },
              {
                styles: "default",
                name: "重置",
                handleClick: this.add
              }
            ]
          }
        ] ,  
      rules: {
        airport: [{ required: true, message: "请输入站点", trigger: "blur" }],
        importOrExport: [
          { required: true, message: "请输入进出港", trigger: "blur" }
        ],
        largeClass: [
          { required: true, message: "请输入大类", trigger: "blur" }
        ],
        mainOrSubBill: [
          { required: true, message: "请输入主分单", trigger: "blur" }
        ],
        isDomestic: [
          { required: true, message: "请输入国内/国际", trigger: "blur" }
        ],
        pickerdata: [
          { required: true, message: "请输入时间", trigger: "change" }
        ]
      },
      form: {
        isDomestic: "",
        mainOrSubBill: "",
        importOrExport: "",
        airport: "",
        largeClass: "",
        Checkbox: [],
        pickerdata: [],
        save: false,
        radio: ""
      },
    }
  },
  created(){
      var obj =  [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
        this.formItemList[0].options = obj
  },
  methods: {
    // 查询
    search() {
      let flag = this.$refs["childRules"].validateForm();
      if (flag) {
        console.log(this.form);
      }
    },
    // 新增或重置
    add() {
      this.$refs["childRules"].resetFields();
    },
  },
}
</script>